<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>
    <script src="/js/vue.js"></script>
    <link rel="stylesheet" href="/css/index.css">
    <script src="/js/index.js"></script>
    <script src="/js/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 添加/编辑商品对话框 -->
        <el-dialog :title="form.id ? '编辑商品' : '添加商品'" :visible.sync="dialogVisible" width="50%">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px">
                <el-form-item label="商品编码" prop="productCode">
                    <el-input v-model="form.productCode" placeholder="请输入商品编码"></el-input>
                </el-form-item>
                <el-form-item label="商品名称" prop="productName">
                    <el-input v-model="form.productName" placeholder="请输入商品名称"></el-input>
                </el-form-item>
                <el-form-item label="商品类别" prop="category">
                    <el-select v-model="form.category" placeholder="请选择商品类别">
                        <el-option
                            v-for="item in categories"
                            :key="item.categoryCode"
                            :label="item.categoryName"
                            :value="item.categoryCode">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="单位" prop="unit">
                    <el-input v-model="form.unit" placeholder="请输入单位"></el-input>
                </el-form-item>
                <el-form-item label="单价" prop="price">
                    <el-input-number v-model="form.price" :precision="2" :step="0.1" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="库存" prop="stock">
                    <el-input-number v-model="form.stock" :min="0" :step="1"></el-input-number>
                </el-form-item>
                <el-form-item label="最低库存" prop="minStock">
                    <el-input-number v-model="form.minStock" :min="0" :step="1"></el-input-number>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" v-model="form.remark" placeholder="请输入备注"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 工具栏 -->
        <div class="toolbar">
            <el-button type="primary" @click="showAddDialog">添加商品</el-button>
            <el-input v-model="searchForm.productName" placeholder="商品名称" style="width: 200px;" class="filter-item"></el-input>
            <el-select v-model="searchForm.category" placeholder="商品类别" style="width: 200px;" class="filter-item">
                <el-option
                    v-for="item in categories"
                    :key="item.categoryCode"
                    :label="item.categoryName"
                    :value="item.categoryCode">
                </el-option>
            </el-select>
            <el-button type="primary" @click="loadData">查询</el-button>
        </div>

        <!-- 数据表格 -->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="productCode" label="商品编码" width="120"></el-table-column>
            <el-table-column prop="productName" label="商品名称" width="180"></el-table-column>
            <el-table-column prop="categoryName" label="商品类别" width="120"></el-table-column>
            <el-table-column prop="unit" label="单位" width="80"></el-table-column>
            <el-table-column prop="price" label="单价" width="100"></el-table-column>
            <el-table-column prop="stock" label="库存" width="100"></el-table-column>
            <el-table-column prop="minStock" label="最低库存" width="100"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                dialogVisible: false,
                form: {
                    id: null,
                    productCode: '',
                    productName: '',
                    category: '',
                    unit: '',
                    price: 0,
                    stock: 0,
                    minStock: 0,
                    remark: ''
                },
                categories: [],
                rules: {
                    productCode: [
                        { required: true, message: '请输入商品编码', trigger: 'blur' }
                    ],
                    productName: [
                        { required: true, message: '请输入商品名称', trigger: 'blur' }
                    ],
                    category: [
                        { required: true, message: '请选择商品类别', trigger: 'change' }
                    ],
                    unit: [
                        { required: true, message: '请输入单位', trigger: 'blur' }
                    ],
                    price: [
                        { required: true, message: '请输入单价', trigger: 'blur' }
                    ],
                    stock: [
                        { required: true, message: '请输入库存', trigger: 'blur' }
                    ],
                    minStock: [
                        { required: true, message: '请输入最低库存', trigger: 'blur' }
                    ]
                },
                searchForm: {
                    productName: '',
                    category: ''
                },
                tableData: [],
                pageNum: 1,
                pageSize: 10,
                total: 0
            },
            created() {
                this.loadData();
                this.loadCategories();
            },
            methods: {
                // 显示添加对话框
                showAddDialog() {
                    this.dialogVisible = true;
                    this.form = {
                        id: null,
                        productCode: '',
                        productName: '',
                        category: '',
                        unit: '',
                        price: 0,
                        stock: 0,
                        minStock: 0,
                        remark: ''
                    };
                },
                // 提交表单
                submitForm() {
                    this.$refs.form.validate((valid) => {
                        if (valid) {
                            const url = this.form.id ? '/product/update' : '/product/add';
                            axios.post(url, this.form)
                                .then(response => {
                                    if (response.data.code === 200) {
                                        this.$message.success(this.form.id ? '更新成功' : '添加成功');
                                        this.dialogVisible = false;
                                        this.loadData();
                                    } else {
                                        this.$message.error(response.data.msg);
                                    }
                                })
                                .catch(error => {
                                    console.error('Error:', error);
                                    this.$message.error('系统错误');
                                });
                        }
                    });
                },
                // 加载数据
                loadData() {
                    const params = {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        productName: this.searchForm.productName,
                        category: this.searchForm.category
                    };
                    console.log('发送请求参数:', params);
                    axios.post('/product/list', params)
                        .then(response => {
                            console.log('接收到响应:', response.data);
                            if (response.data.code === 200) {
                                this.tableData = response.data.data.list;
                                this.total = response.data.data.total;
                            } else {
                                this.$message.error(response.data.msg || '加载数据失败');
                            }
                        })
                        .catch(error => {
                            console.error('请求错误:', error);
                            this.$message.error('系统错误');
                        });
                },
                // 加载类别数据
                loadCategories() {
                    axios.get('/category/list')
                        .then(response => {
                            if (response.data.code === 200) {
                                this.categories = response.data.data;
                            } else {
                                this.$message.error(response.data.msg);
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            this.$message.error('系统错误');
                        });
                },
                // 处理页码变化
                handleCurrentChange(val) {
                    this.pageNum = val;
                    this.loadData();
                },
                // 处理每页条数变化
                handleSizeChange(val) {
                    this.pageSize = val;
                    this.loadData();
                },
                // 处理编辑
                handleEdit(row) {
                    axios.get('/product/get/' + row.id)
                        .then(response => {
                            if (response.data.code === 200) {
                                this.form = response.data.data;
                                this.dialogVisible = true;
                            } else {
                                this.$message.error(response.data.msg);
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            this.$message.error('系统错误');
                        });
                },
                // 处理删除
                handleDelete(row) {
                    this.$confirm('确认删除该商品吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.get('/product/delete/' + row.id)
                            .then(response => {
                                if (response.data.code === 200) {
                                    this.$message.success('删除成功');
                                    this.loadData();
                                } else {
                                    this.$message.error(response.data.msg);
                                }
                            })
                            .catch(error => {
                                console.error('Error:', error);
                                this.$message.error('系统错误');
                            });
                    }).catch(() => {});
                }
            }
        });
    </script>
</body>
</html> 